<template>
  <!-- PAGE CONTENT BEGINS -->
  <div>
    <div class="row">
      <!--一级分类-->
      <div class="col-md-6">
        <p>
          <button v-on:click="add1()" class="btn btn-white btn-warning btn-round">
            <i class="ace-icon fa fa-edit bigger-120 blue"></i>
            新增一级
          </button>
          &nbsp;
          <button v-on:click="all()" class="btn btn-white btn-warning btn-round">
            <i class="ace-icon fa fa-refresh bigger-120 blue"></i>
            刷新
          </button>
        </p>
        <table id="level1-table" class="table  table-bordered table-hover">
          <thead>
          <tr>
            <th> ID </th>
            <th> 名称 </th>
            <th> 顺序 </th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="category in level1" :key="category.num" v-on:click="onClickLevel1(category)" v-bind:class="{ 'active' : category.id === active.id }">
            <td> {{category.id}} </td>
            <td> {{category.name}} </td>
            <td> {{category.sort}} </td>
            <td>
              <div class="hidden-sm hidden-xs btn-group">
                <button v-on:click="edit(category)" class="btn btn-xs btn-info">
                  <i class="ace-icon fa fa-pencil bigger-120"></i>
                </button>

                <button v-on:click="del(category.id)" class="btn btn-xs btn-danger">
                  <i class="ace-icon fa fa-trash-o bigger-120"></i>
                </button>
              </div>

              <div class="hidden-md hidden-lg">
                <div class="inline pos-rel">
                  <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown" data-position="auto">
                    <i class="ace-icon fa fa-cog icon-only bigger-110"></i>
                  </button>

                  <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
                    <li>
                      <a href="#" class="tooltip-info" data-rel="tooltip" title="View">
                    <span class="blue">
                      <i class="ace-icon fa fa-search-plus bigger-120"></i>
                    </span>
                      </a>
                    </li>

                    <li>
                      <a href="#" class="tooltip-success" data-rel="tooltip" title="Edit">
                    <span class="green">
                      <i class="ace-icon fa fa-pencil-square-o bigger-120"></i>
                    </span>
                      </a>
                    </li>

                    <li>
                      <a href="#" class="tooltip-error" data-rel="tooltip" title="Delete">
                    <span class="red">
                      <i class="ace-icon fa fa-trash-o bigger-120"></i>
                    </span>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <!--二级分类-->
      <div class="col-md-6">
        <p>
          <button v-on:click="add2()" class="btn btn-white btn-warning btn-round">
            <i class="ace-icon fa fa-edit bigger-120 blue"></i>
            新增二级
          </button>
        </p>
        <table id="level2-table" class="table  table-bordered table-hover">
          <thead>
          <tr>
            <th> ID </th>
            <th> 名称 </th>
            <th> 顺序 </th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="category in level2" :key="category.num">
            <td> {{category.id}} </td>
            <td> {{category.name}} </td>
            <td> {{category.sort}} </td>
            <td>
              <div class="hidden-sm hidden-xs btn-group">
                <button v-on:click="edit(category)" class="btn btn-xs btn-info">
                  <i class="ace-icon fa fa-pencil bigger-120"></i>
                </button>

                <button v-on:click="del(category.id)" class="btn btn-xs btn-danger">
                  <i class="ace-icon fa fa-trash-o bigger-120"></i>
                </button>
              </div>

              <div class="hidden-md hidden-lg">
                <div class="inline pos-rel">
                  <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown" data-position="auto">
                    <i class="ace-icon fa fa-cog icon-only bigger-110"></i>
                  </button>

                  <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
                    <li>
                      <a href="#" class="tooltip-info" data-rel="tooltip" title="View">
                    <span class="blue">
                      <i class="ace-icon fa fa-search-plus bigger-120"></i>
                    </span>
                      </a>
                    </li>

                    <li>
                      <a href="#" class="tooltip-success" data-rel="tooltip" title="Edit">
                    <span class="green">
                      <i class="ace-icon fa fa-pencil-square-o bigger-120"></i>
                    </span>
                      </a>
                    </li>

                    <li>
                      <a href="#" class="tooltip-error" data-rel="tooltip" title="Delete">
                    <span class="red">
                      <i class="ace-icon fa fa-trash-o bigger-120"></i>
                    </span>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!--模态框-->
    <div class="modal fade" id="myFormModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">表单</h4>
          </div>
          <div class="modal-body">
            <!--表格-->
            <form class="form-horizontal">
              <div class="form-group">
                <label class="col-sm-2 control-label">父ID</label>
                <div class="col-sm-10">
                  <p class="form-control-static">{{active.name || "无"}}</p>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">名称</label>
                <div class="col-sm-10">
                  <input v-model="category.name" class="form-control" placeholder="输入名称"/>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">顺序</label>
                <div class="col-sm-10">
                  <input v-model="category.sort" class="form-control" placeholder="输入顺序"/>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary" v-on:click="save()">保存</button>
          </div>
        </div><!-- /.modal-content-->
      </div><!-- /.modal-dialog-->
    </div><!-- /.modal-->
  </div>
</template>
<script>
export default {
  name: 'business-category',
  data: function (){
    return{
      //映射表单数据
      category: {},
      categorys: [],
      level1:[],
      level2:[],
      active: {},
    }
  },
  mounted:function (){
    let _this = this;
    _this.$parent.activeSidebar("business-category-sidebar");
    _this.all();
  },
  methods:{
    /**新增一级分类*/
    add1() {
      let _this = this;
      _this.active = {};
      _this.level2 = [];
      _this.category = {parent:"00000000"};
      $("#myFormModal").modal("show");
    },
    /**新增二级分类*/
    add2() {
      let _this = this;
      if(Tool.isEmpty(_this.active)){
        toast.warning("请先选择一级分类！");
        return ;
      }
      _this.category = {parent:_this.active.id};
      $("#myFormModal").modal("show");
    },

    edit(category) {
      let _this = this;
      _this.category = $.extend({},category);
      $("#myFormModal").modal("show");
    },
    /**查询 all*/
    all(){
      let _this = this;
      Loading.show();
      _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/admin/category/all').then((response)=>{
        Loading.hide();
        let resp = response.data;
        _this.categorys = resp.content;
        //将所有数据转换为树结构
        //找一级分类
        _this.level1 = [];
        for(let i = 0;i<_this.categorys.length;i++){
          let c = _this.categorys[i];
          if(c.parent === '00000000'){
            _this.level1.push(c);
            //找二级分类
            for(let j = 0;j<_this.categorys.length;j++){
              let child = _this.categorys[j];
              if(child.parent === c.id){
                if(Tool.isEmpty(c.children)){
                  c.children = [];
                }
                c.children.push(child);
              }
            }
          }
        }
        _this.level2 = [];
        setTimeout(function (){
          $("tr.active").trigger("click");
        },100);
      })
    },
    /**保存*/
    save(){
      let _this = this;
      /**保存校验*/
      if(1 != 1
      || !Validator.require(_this.category.parent,"父ID")
      || !Validator.require(_this.category.name,"名称")
      || !Validator.length(_this.category.name,"名称",1,50)
      ){
        return;
      }
      _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/admin/category/save',_this.category)
      .then((response)=>{
        console.log("保存分类列表结果：",response);
        let resp = response.data;
        if(resp.success){
          $("#myFormModal").modal("hide");
          _this.all();
          toast.success("保存成功！");
        }else{
          toast.warning(resp.message);
        }


      })
    },
    /**删除*/
    del(id){
      let _this = this;
      //弹出框
      Confirm.show("删除分类后不可恢复，您是否检查删除!",function (){
        _this.$ajax.delete(process.env.VUE_APP_SERVER + '/business/admin/category/delete/'+ id )
            .then((response)=>{
              console.log("删除分类列表结果：",response);
              let resp = response.data;
              if(resp.success){
                _this.all();
                toast.success("删除成功！");
              }
            });
      })
    },

    /**点击显示二级分类*/
    onClickLevel1(category){
      let _this = this;
      _this.active = category;
      _this.level2 = category.children;

    }
  }
}
</script>
<style scoped>
  .active td {
    background-color: #73a6c0  !important;
  }
</style>